<!--
  ~ /*
  ~ *****************************************************************************
  ~  * Copyright (C) 2019 Testsigma Technologies Inc.
  ~  * All rights reserved.
  ~  ****************************************************************************
  ~  */
  -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8"/>
  <title>something went wrong</title>
</head>

<body class="align-center">
<style type="text/css">
  :root {
    --main-color: white;
    --stroke-color: #5d862e;
    --link-color: #29abe2;
  }

  body {
    padding: 0;
    margin: 0;
    height: 100vh;
    width: 100%;
  }

  .align-center {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
  }

  .loading-dots {
    color: #6a737d;
    width: 40px;
    display: inline-block;
  }

  .loading-dots:after {
    content: "";
    animation: dotsLoadLTR 2s linear infinite;
  }

  @keyframes dotsLoadLTR {
    0% {
      content: ".";
    }

    20% {
      content: "..";
    }

    40% {
      content: "...";
    }

    60% {
      content: "....";
    }

    80% {
      content: ".....";
    }

    100% {
      content: "......";
    }
  }

  .icon {
    width: 200px;
    height: 200px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .result-not-image, .loading-image {
    flex: 0 0 100%;
  }

  .msg-text {
    color: #6a737d;
    font-size: 27px;
    font-weight: 600;
  }

  .loading.completed,
  .result-not-found, .result-not-image, .loading-image.completed {
    display: none;
  }

  .result-not-found.completed, .result-not-image.completed {
    display: block;
  }
</style>
<div>

  <div class="result-not-found msg-text">Something went wrong...</div>
  <div class="icon">
    <div class="loading-image">
      <?xml version="1.0" encoding="utf-8"?>
      <svg viewBox="0 0 49 47.4" xmlns="http://www.w3.org/2000/svg">
        <style>#A {
          animation: dash 3s ease forwards infinite;
          transform-origin: center
        }

        @keyframes dash {
          to {
            stroke-dashoffset: 0
          }
        }</style>
        <path
          d="M46 17.7c-.4-.6-1-1-1.7-1.1-.3 0-.7-.1-1-.2-.4-.1-.9-.1-1.3-.2-1.2-.1-1.9-.6-2.3-1.6-.3-.7-.3-1.2-.1-1.8l.2-.4.9-2.3c.2-.6.2-1.3-.2-2-.7-1.3-1.7-2.2-3-2.6-.8-.3-1.6-.2-2.3.2l-1 .6-1.4.9c-.3.2-.7.3-1.2.3h0c-1.1 0-2.2-.7-2.4-1.6-.1-.5-.3-1-.5-1.4-.1-.4-.3-.8-.4-1.2-.3-.9-.8-1.5-1.7-1.8-.2-.1-.5-.2-.8-.2-.1 0-.2-.1-.3-.1h-1.8c-1.4.3-2.3 1-2.6 2.3 0 .6-.2 1.2-.4 1.7l-.3.9c-.3.9-1.3 1.5-2.3 1.5-.4 0-.8-.1-1.1-.3l-1.8-1.1c-.3-.2-.6-.3-.8-.5-.5-.4-1.1-.5-1.7-.3-1.6.4-2.7 1.3-3.5 2.9-.2.6-.3 1.2 0 1.9.1.3.2.6.4.9l.6 1.4c.4 1 .4 1.8-.2 2.7-.4.6-.8.9-1.5 1-.9.2-1.9.3-2.9.4-.8.1-1.5.5-2 1.2-.6 1-.9 2.1-.8 3.4.1 1.1.6 2 1.6 2.4l1.1.6 1.2.6c.6.3 1 .9 1.2 1.7.2.9 0 1.7-.4 2.2-.7.7-1.3 1.5-1.9 2.2-.3.3-.5.8-.6 1.2-.3 1.7 1.1 4.1 2.6 4.7.4.1.9.2 1.3.1.8-.1 1.7-.3 2.6-.5 1-.2 1.7 0 2.4.7.5.5.8 1.1.8 1.8l-.1 2.9c0 .8.2 1.4.8 1.9.9.8 1.9 1.3 3.2 1.5h.4c1 0 1.8-.4 2.3-1.2.2-.3.5-.6.7-.9.3-.3.5-.7.8-1 .4-.6 1.2-1 2-1s1.6.4 2 .9a7.55 7.55 0 0 0 1.1 1.4c.2.3.4.6.7.8.4.5 1 .9 1.6.9 1.5.1 2.9-.3 4.1-1.4.6-.5.8-1.2.8-2v-1.1c0-.5 0-.9-.1-1.4-.1-1.1.3-1.9 1.1-2.5.5-.4 1.1-.5 1.6-.4l2.8.6c.9.2 1.7 0 2.5-.6.9-.8 1.5-1.8 1.8-3 .2-1 0-1.9-.7-2.6-.3-.3-.5-.6-.8-.9-.2-.3-.5-.6-.8-.9-.7-.8-1-1.6-.7-2.6.2-.7.5-1.2 1.1-1.5l2.6-1.4c.7-.3 1.1-.9 1.3-1.6.3-1.4.1-2.8-.8-4.1z"
          fill="none"
          id="A" stroke="#24292E" stroke-dasharray="360%" stroke-dashoffset="-360%" transform="rotate(284)"/>
        <g fill="#40B84A">
          <path
            d="M24.8 18h0l.1-1.7v-.4c0-.8.1-.8.1-2.4 0-.1 0-.2-.1-.3h-.4c-.7.2-1.5.4-2.4.5-.2 0-.3.2-.3.4l-.2 1.8-.2 2-.1 1.8-.2 4v1.5l-.2 3.2v.7c0 1 .2 1.8.5 2.4s.8 1.1 1.5 1.3c.6.3 1.4.4 2.4.4.4 0 .8 0 1.2-.1.4 0 1-.2 1.7-.3.2 0 .3-.2.3-.3.1-.4.1-.9.2-1.4.1-.6.1-1.2.2-1.4 0-.2 0-.3-.1-.4s-.3-.1-.4 0c-.7.4-1.1.5-1.7.6h-.8a1.93 1.93 0 0 1-1-.3c-.3-.1-.4-.2-.4-.5-.1-.5-.1-.6-.1-1.1v-.9l.2-5.1.2-4z"/>
          <path
            d="M32.8 18.3l-.7-1.5c-.1-.2-.3-.4-.6-.5-.2-.1-.5-.1-.8 0l-5 2.5v-.1l-3.6 1.9-2.1 1.1-.8-1.8c-.1-.2-.3-.4-.6-.5-.2-.1-.5-.1-.8 0l-1.4.7c-.5.2-.7.8-.5 1.4l1.9 4.2c.1.2.3.4.6.5.1 0 .2.1.3.1s.3 0 .4-.1l2.7-1.3 3.7-1.8 6.8-3.3c.5-.4.7-1 .5-1.5z"/>
        </g>
      </svg>
    </div>
    <div class="result-not-image">
      <svg alt="Web browser with concerned expression" height="140px" version="1.1" viewBox="0 0 151 140" width="151px"
           xmlns="http://www.w3.org/2000/svg">
        <title></title>
        <g fill="none" fill-rule="evenodd" id="Well shoot..." stroke="none" stroke-width="1">
          <g transform="translate(-31.000000, -40.000000)">
            <g transform="translate(31.000000, 40.000000)">
              <rect fill="#584B86" height="14" id="exclaim-1" rx="1" width="2" x="22" y="0"/>
              <rect fill="#584B86" height="14"
                    id="exclaim-2" rx="1"
                    transform="translate(7.000000, 23.000000) rotate(90.000000) translate(-7.000000, -23.000000) "
                    width="2" x="6" y="16"/>
              <rect fill="#584B86" height="14"
                    id="exclaim-3"
                    rx="1"
                    transform="translate(12.000000, 12.000000) rotate(-45.000000) translate(-12.000000, -12.000000) "
                    width="2" x="11" y="5"/>
              <ellipse cx="79" cy="129.5" fill="#000000" id="shadow" opacity="0.08" rx="72" ry="10.5"/>
              <rect fill="#FFFFFF" height="106" id="body" rx="9" width="114" x="22" y="22"/>
              <polygon fill="#CDCADD" id="toolbar"
                       points="23 47 79 47 135 47 135 32 135 29 132 25 128 23 29.9948981 23 26 25 24 27 23 30"/>
              <circle cx="33.5" cy="34.5" fill="#FFFFFF" id="toolbar-button-1" r="2.5" stroke="#584B86"
                      stroke-width="2"/>
              <circle cx="43.5" cy="34.5" fill="#FFFFFF" id="toolbar-button-2" r="2.5" stroke="#584B86"
                      stroke-width="2"/>
              <circle cx="53.5" cy="34.5" fill="#FFFFFF" id="toolbar-button-3" r="2.5" stroke="#584B86"
                      stroke-width="2"/>
              <rect fill="#584B86" height="2" id="toolbar-border-bottom" width="114" x="22" y="45"/>
              <rect fill="#000000" height="2" id="toolbar-shadow" opacity="0.08" width="110" x="24" y="47"/>
              <rect height="104" id="window-border" rx="9" stroke="#584B86" stroke-width="2" width="112" x="23" y="23"/>
              <g id="eyes">
                <ellipse cx="56.5" cy="72.5" fill="#584B86" id="eye-left" rx="3.5" ry="3.5">
                  <animate attributeName="ry" d="leftEyeAnim" dur="3s"
                           fill="freeze"
                           from="3.5" id="leftEyeAnim" repeatCount="indefinite" to="0.5"
                           values="3.5;3.5;3.5;3.5;3.5;3.5;3.5;3.5;3.5;3.5;3.5;3.5;3.5;3.5;3.5;3.5;3.5;3.5;3.5;3.5;3.5;3.5;0.5;2"/>
                </ellipse>
                <ellipse cx="101.5" cy="72.5" fill="#584B86" id="eye-right" rx="3.5" ry="3.5">
                  <animate attributeName="ry" dur="3s" fill="remove"
                           from="3.5"
                           repeatCount="indefinite" to="0.5"
                           values="3.5;3.5;3.5;3.5;3.5;3.5;3.5;3.5;3.5;3.5;3.5;3.5;3.5;3.5;3.5;3.5;3.5;3.5;3.5;3.5;3.5;3.5;0.5;2"/>
                </ellipse>
                <animateMotion calcMode="linear" dur="6s" fill="freeze"
                               keyPoints="0; 0;   0;   0;    0;    0;    0.25; 0.25; 0.25; 0.75; 0.75; 0.75;  0.75; 1; 1"
                               keyTimes=" 0; 0.1; 0.2; 0.3;  0.4;  0.5;  0.6;  0.65; 0.7;  0.75; 0.8;  0.825; 0.85; 0.9; 1"
                               path="
                          M 0 0
                          C 5 2, 5 2, 12 0
                          C 0 3, 0 3, -10 0
                          H 0
                          "
                               repeatCount="indefinite"/>
                <rect fill="#584B86" height="2" id="mouth" rx="1" width="28" x="65" y="94"/>
              </g>
            </g>
          </g>
        </g>
      </svg>
    </div>
  </div>
  <div class="loading msg-text"><span class="loading-dots"></span></div>
  <div class="result-not-found"></div>
</div>
</body>
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function (event) {
    setTimeout(
      function () {
        document.getElementsByClassName('loading')[0].classList.add('completed');
        document.getElementsByClassName('result-not-found')[0].classList.add('completed');
        document.getElementsByClassName('loading-image')[0].classList.add('completed');
        document.getElementsByClassName('result-not-image')[0].classList.add('completed');
        document.getElementsByClassName('result-not-found')[1].classList.add('completed');

      }, 3500);
  })
</script>

</html>
